<template>
  <el-dialog :before-close="beforeClose" class="modal-cryptal-address" :title="$t('member.historical_changes')" :visible.sync="visible" width="40%">
    <div class="content-modal-container">
      <el-table :data="tableData.record" style="width: 100%" :row-key="record => record.id">
        <el-table-column
          prop="updateAt"
          :label="$t('report.date')"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="cryptoWalletAddress"
          :label="$t('member.content')"
          align="center"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <span v-if="scope.row.cryptoWalletAddress">{{ scope.row.cryptoWalletAddress }}</span>
            <span v-else>-</span>
          </template>
        </el-table-column>
      </el-table>
      <div v-if="tableData.record && tableData.record.length > 0" class="pagination-container">
        <el-pagination
          :current-page="pagination.currentPage"
          :page-size="pagination.pageSize"
          :total="tableData.totalRecord"
          @current-change="onPageChange"
        >
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'CrytalWalletAddressModal',
  props: {
		userId: { type: String, default: '' }
	},
  data() {
    return {
      visible: true,
      tableData: {
        record: [],
        pageNum: 1,
        pageSize: 5,
        totalRecord: 0
      },
      pagination: {
        currentPage: 1,
        pageSize: 5
      }
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList(page = 1) {
        const res = await this.$api.getCryptoWalletAddressPage({
            pageNum: page,
            pageSize: this.pagination.pageSize,
            userId: this.userId
        })

        const data = res.data

        if (!data.record) return

        this.tableData = data
        this.pagination.currentPage = data.pageNum
        this.pagination.pageSize = data.pageSize
    },
    onPageChange(page) {
      this.getList(page)
    },
    beforeClose() {
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.pagination-container {
  text-align: center;
  margin-top: 20px;
}

::v-deep .el-dialog__title {
    display: flex;
    justify-content: center;
}
</style>
